<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img
      src="https://k.sinaimg.cn/n/sinakd20111/580/w690h690/20240214/6fb3-7847f1526d96ef9f64bd57abf103b263.jpg/w700d1q75cms.jpg"
      alt="这是一个美女头像"
      title="哈哈"
      width="300"
    />

    <!-- 如果html文件和图片文件在同一个文件夹里面，直接写图片名称或者前面加./ -->
    <!-- <img src="2.png" alt="" width="300" /> -->
    <img src="./2.png" alt="" width="300" />

    <!-- 如果html文件和图片所在的文件夹并列，写 文件夹名称/图片 -->
    <!-- <img src="images/1.jpg" alt="" width="300" /> -->
    <img src="./images/1.jpg" alt="" width="300" />

    <!-- 如果html文件所在的文件夹和图片并列，写 ../图片 -->
    <img src="../3.png" alt="" width="300" />

    <img src="./images/img/4.png" alt="" width="300" />
    <img src="../../5.png" alt="" width="300" />

    <img src="D:\aaa/5.png" alt="" width="300" />
  </body>
</html>

<!-- 
  图片标签
    <img src="" />

    图片标签不会独占一行


    至少需要一个src属性，表示图片的路径
      src可以是一个在线的绝对路径
      src也可以是一个相对路径


    alt属性表示的是当图片无法正常加载(路径有误/网络超时/图片已删除等情况)时的一个提示文字
    用于做SEO优化
    还可以用于做无障碍阅读

    title属性是当鼠标移入时显示的提示文字
    title是一个通用属性，任何的标签都可以加这个属性
 -->
